<template>
	<view class="warp">
		<view class="postBanner">
			<view class="car_box"></view>
		</view>
		<u--form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
			<RecyclingCategories :classdate="classdate" :type="type" @typeSelected="typeDianji" />
			<u-gap height="20" bg-color="#f5f5f5"></u-gap>

			<view class="class_box">
				<view class="title">今日指导价</view>
			</view>

			<u-cell-group>
				<u-cell title="黄纸" label="纯色纸箱,如家电包装箱" value="1元/公斤" :title-style="{color:'#000000',fontSize:'32rpx'}"
					:value-style="{color:'#009920',fontSize:'32rpx'}"></u-cell>
				<u-cell title="统纸" label="黄纸和花纸混合" value="1元/公斤" :title-style="{color:'#000000',fontSize:'32rpx'}"
					:value-style="{color:'#009920',fontSize:'32rpx'}"></u-cell>
			</u-cell-group>
			<u-gap height="20" bg-color="#f5f5f5"></u-gap>
			<ViewGuidelines />
			<u-gap height="20" bg-color="#f5f5f5"></u-gap>
			<FormDetails :form="form" @addressSelected="toAddressList" @submit="submit" />
			<u-gap height="190" bg-color="#f5f5f5"></u-gap>
			<AgreementCheckbox :checkboxList="checkboxList1" v-model="form.checkedItems"
				@checkboxChange="checkboxChange" />
			<view class="buyOrderBox" @click="buyorder" v-if="leftBuyBtn">
				<u-icon name="car-fill" color="#ffffff" size="50"></u-icon>
			</view>
			<CartPopup @close="close" :cartBottom="cartBottom" :cartItems="cartItems"></CartPopup>
		</u--form>
	</view>
</template>

<script>
	import RecyclingCategories from './components/RecyclingCategories.vue';
	import ViewGuidelines from './components/ViewGuidelines.vue';
	import FormDetails from './components/FormDetails.vue';
	import AgreementCheckbox from './components/AgreementCheckbox.vue';
	import CartPopup from './components/CartPopup.vue';


	export default {
		components: {
			RecyclingCategories,
			ViewGuidelines,
			FormDetails,
			AgreementCheckbox,
			CartPopup
		},
		data() {
			return {
				leftBuyBtn: true,
				cartBottom: false,
				cartItems: [{
						title: "纸皮类",
						image: require('@/static/coolc/postorder_1.jpg'),
						weightRange: "10-50公斤",
					},
					{
						title: "衣物&其它",
						image: require('@/static/coolc/postorder_2.jpg'),
						weightRange: "100公斤以上",
					},
					{
						title: "金属类",
						image: require('@/static/coolc/postorder_3.jpg'),
						weightRange: "50-100公斤",
					},
					{
						title: "塑料类",
						image: require('@/static/coolc/postorder_4.jpg'),
						weightRange: "1-5公斤",
					},
				],
				type: '',
				form: {
					checkedItems: [],
					radio: null, // 预估重量
					yuyoutime: '', // 预约时间
					yuyoudizi: '', // 预约地址
					uploadedImages: [], // 上传的照片
					cartItems: [], // 已添加的回收物品
				},
				rules: {},
				classdate: [{
						img: require('@/static/coolc/postorder_1.jpg'),
						name: "纸皮类",
						type: "zp"
					},
					{
						img: require('@/static/coolc/postorder_2.jpg'),
						name: "衣物类",
						type: "yw"
					},
					{
						img: require('@/static/coolc/postorder_3.jpg'),
						name: "金属类",
						type: "js"
					},
					{
						img: require('@/static/coolc/postorder_4.jpg'),
						name: "塑料类",
						type: "sl"
					},
				],
				errorType: 'message',
				checkboxList1: [{
					name: '勾选代表同意《收呗环保上门回收免责条款》',
					disabled: false,
				}, ],
			};
		},
		methods: {
			close() {
				this.cartBottom = false;
			},
			removeItem(index) {
				this.mockCartItems.splice(index, 1); // Remove the item at the given index
			},
			buyorder() {

				this.cartBottom = true;
				// alert(this.cartBottom)
			},

			// 提交订单方法
			submit() {
				// 验证表单
				this.$refs.uForm.validate((valid) => {
					if (valid) {
						// 生成订单对象
						this.orderData = {
							items: this.form.cartItems, // 已添加的回收物品
							estimatedWeight: this.form.radio, // 预估重量
							appointmentTime: this.form.yuyoutime, // 预约时间
							address: this.form.yuyoudizi, // 地址
							uploadedImages: this.form.uploadedImages, // 上传的照片
							agreementAccepted: this.form.checkedItems.length > 0 // 用户是否同意条款
						};

						// 输出订单对象，用于进一步处理（例如：发送至服务器）
						console.log("订单已生成:", this.orderData);
					} else {
						console.log("表单验证失败！");
					}
				});
			},
			// 处理用户点击添加回收物品
			addbuy() {
				// 在此添加新的回收物品逻辑
				this.form.cartItems.push({
					title: "新的回收物品",
					weightRange: "1-10公斤"
				});
			},
			// 处理用户上传照片
			handleImageUpload(image) {
				// 假设 `image` 是上传的照片数据，添加到表单的 `uploadedImages` 数组中
				this.form.uploadedImages.push(image);
			},
			// 处理时间选择
			handleTimeSelected(selectedTime) {
				this.form.yuyoutime = selectedTime;
			},
			// 打开地址列表
			toAddressList() {
				// 打开地址选择页面逻辑
				uni.navigateTo({
					url: '/pages/address/AddressList'
				});
			},
			typeDianji(type) {
				this.type = type;
			},

			checkboxChange() {
				// Handle checkbox changes
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import 'FormCompontent.css';
</style>